import { Outlet } from "react-router-dom";
import "antd/dist/reset.css";
import { useEffect, useState, Fragment } from "react";
import * as api from "../../../api/Category";
import {
  Button,
  Form,
  Input,
  Modal,
  Space,
  Table,
  Tooltip,
  Upload,
} from "antd";
import { ColumnsType } from "antd/es/table";
import { Image } from "antd";
import {
  LoadingOutlined,
  PlusOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import "./index.css";
import { ModalCom } from "../../../componement/modal";
// import * as api from "../../../api/Category"

export const ProductCategoryCom = () => {
  const [visible, setVisible] = useState(false);
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  // 模态框
  const [open, setOpen] = useState(false);
  let [title, settitle] = useState("增加");
  // const [confirmLoading, setConfirmLoading] = useState(false);
  // const [Url, setUrl] = useState("");
  const [imageUrl, setImageUrl] = useState<string>();

  let [list, setList] = useState([]);
  let [cname, setCname] = useState("");
  let [item, setTtem] = useState<any>("");

  let cnameChange = (e: any) => {
    // console.log("gdf");
    setCname(e.target.value);
  };

  //修改是改的item

  //获取数据列表
  let getData = async () => {
    let res = await api.getList();
    // let newlist: any = [];
    let newarr = res.data.data.map((p: any) => {
      return { ...p, key: p.category_id };
    });
    setList(newarr);
    console.log(newarr.reverse());
  };

  //删除方法
  let delitem = (item: any) => {
    return async () => {
      console.log(item);
      try {
        let res = await api.delItemApi(item.category_id);
        getData();
      } catch (error) {
        console.log(error);
      }
    };
  };
  //增加的方法
  let additme = () => {
    setOpen(true);
  };
  //修改的方法
  let editItem = (item: any) => {
    return () => {
      // console.log(item);
      settitle("编辑");
      setTtem(item);
      //数据回显
      setCname(item.categoryName);
      setImageUrl(item.categoryImgurl);
      setOpen(true);
    };
  };

  //按下modal ok的按钮
  let handleOk = async (e: any) => {
    console.log(e);
    if (title === "增加") {
      try {
        let res = await api.additem(cname, imageUrl);
        console.log(cname, "cname");
        console.log(res);
        getData();
        setCname("");
        setImageUrl("");
        setOpen(false);
      } catch (error) {
        console.log(error);
      }
    } else {
      //编辑
      console.log("编辑");
      try {
        let res = await api.editItem(cname, item.category_id);
        console.log(res);
        getData();
        setCname("");
        setImageUrl("");
      } catch (error) {}
      setOpen(false);
    }
  };
  //上传图片的逻辑
  let handleChange = (ww: any) => {
    if (ww.fileList[0].response) {
      setImageUrl(ww.fileList[0].response.headimgurl);
    }
  };
  //上传的html的icon
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );
  //modal取消的按钮
  const handleCancel = () => {
    setCname("");
    setImageUrl("");
    console.log("Clicked cancel button");
    setOpen(false);
  };
  //表格的数据列表
  let columns: ColumnsType<DataType> = [
    {
      title: "类目图片",
      dataIndex: "categoryImgurl",
      render: (ee) => {
        // console.log(ee, "iii");
        return (
          <>
            <Image width={100} src={ee} />
          </>
        );
      },
    },
    {
      title: "类目id",
      dataIndex: "category_id",
    },
    {
      title: "类目名称",
      dataIndex: "categoryName",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      sorter: (a, b) => a.age - b.age,
      // return
    },
    {
      title: "创建人",
      dataIndex: "creator",
    },
    {
      title: "更新时间",
      dataIndex: "updateTime",
    },
    {
      title: "更新人",
      dataIndex: "updator",
    },
    {
      title: "Action",
      render: (i, item) => (
        <Space size="middle">
          <b>查看 </b>
          <a onClick={delitem(item)}>删除</a>
          <a onClick={editItem(item)}>编辑</a>
        </Space>
      ),
    },
  ];

  //初始化拉取数据
  useEffect(() => {
    //初始化拉取数据
    getData();
  }, []);

  return (
    <div>
      {/* <h1>产品类目</h1> */}
      <Tooltip title="添加">
        <Button
          type="primary"
          shape="circle"
          icon={<PlusOutlined />}
          onClick={additme}
        />
      </Tooltip>
      <Table
        columns={columns}
        dataSource={list}
        // pagination={{ pageSize: 5 }}
        scroll={{ y: 440 }}
      />
      <ModalCom
        title={title}
        open={open}
        handleOk={handleOk}
        handleCancel={handleCancel}
        // setCname={setCname}
        // setImageUrl={setImageUrl}
      >
        <Upload
          method="post"
          name="headimgurl"
          listType="picture-card"
          className="avatar-uploader"
          showUploadList={false}
          action="/api/students/uploadStuAvatar"
          // beforeUpload={beforeUpload}
          onChange={handleChange}
        >
          {imageUrl ? (
            <img
              src={imageUrl}
              alt="avatar"
              width={50}
              height={100}
              style={{ width: "100%" }}
            />
          ) : (
            uploadButton
          )}
        </Upload>
        <Form>
          {/* <label htmlFor="">图片类目</label> */}
          <Input
            // title="图片类目"
            value={cname}
            onChange={cnameChange}
            // width="100px"
          ></Input>
        </Form>
      </ModalCom>
    </div>
  );
};
